<template>
  <div class="box">
    <div class="box-left">
      <Card></Card>
      <Pie></Pie>
      <Line></Line>
    </div>
    <div class="box-center">
      <div class="header"><h1 style="color: #ccc">中国疫情地图</h1></div>
      <Map></Map>
    </div>
    <div class="box-right" style="color: #eee">
      <Table></Table>
    </div>
  </div>
</template>

<script setup lang="ts">
import Table from './components/Table/Table.vue'
import Card from './components/Card/Card.vue'
import Pie from './components/Pie/Pie.vue'
import Map from './components/Map/Map.vue'
import Line from './components/Line/Line.vue'

</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  height: 100%;
  overflow: hidden;
}
</style>
<style scoped lang="scss">
$itemColor: #41b0db;
$itemBg: #223651;
$itemBorder: #212028;
.box {
  display: flex;
  height: 100%;
  background: url('./assets/1.jpg') no-repeat 100%;
  overflow: hidden;

  &-left {
    width: 400px;
    height: 100%;
  }
  &-center {
    flex: 1;
    .header {
      display: flex;
      width: 100%;
      height: 150px;
      justify-content: center;
      align-items: center;
    }
    .content {
      width: 100%;
      height: auto;
      aspect-ratio: 4/3;
    }
  }
  &-right {
    width: 400px;
    height: 100%;
  }
}
</style>
